$(function () {
    // - 找到剪裁区的图片 （img#image）
    var $image = $('#image');
    // - 设置配置项
    var option = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(option);

    //点击按钮 弹窗选择图片
    $("#chooseImageBtn").on('click', function () {
        $("#chooseImageInp").click()
    })

    //渲染到页面
    let layer = layui.layer
    $("#chooseImageInp").on('change', function () {
        let file = this.files[0]
        if (file == undefined) {
            return layer.msg("请选择上次图片")
        }
        let newUrl = URL.createObjectURL(file)
        $image
            .cropper('destroy')     //销毁旧的剪裁区域
            .attr('src', newUrl)    //重新设置图片地址
            .cropper(options)       //重新渲染cropper
    })

    //点击按钮修改头像
    $("#uploadBtn").on('click',function(){
        var dataURL=$image.cropper('getCroppedCanvas',{
            width:100,
            height:100
        }).toDataURL('image/png')
        axios({
            url:'/my/update/avatar',
            method:'post',
            data:`avatar=${encodeURIComponent(dataURL)}`
        }).then(res=>{
            //成功回调
            console.log(res)
            if (res.data.status!=0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜你修改头像成功')
            window.parent.getUserInfo()
        });
    })
})